<template>
  <div id="userbox">
    <div class="avatar">
      <img
        :src="'http://localhost:8010/getImage?name='+$store.state.user.userInfo.user.avatar_Url"
        alt
      />
    </div>
    <div class="nickname">{{$store.state.user.userInfo.user.nickname}}</div>
    <div class="center">
      <div class="inline">
        <span>等级:</span>
        <span class="level">Lv.{{$store.state.user.userInfo.user.level}}</span>
      </div>
      <div class="inline">
        <span class="modifypassword" @click="modifyPw()">修改密码</span>
      </div>
    </div>
    <div class="intro">
      <div class="intro_content">
        <strong>个人简介:</strong>
        <br />
        <p v-if="!$store.state.user.userInfo.user.intro">你还没写哦</p>
        {{$store.state.user.userInfo.user.intro}}
      </div>
      <div class="button" @click="modify()">修改个人资料</div>
    </div>
    <div style="clear:both;"></div>
    <el-dialog title="修改个人资料" :visible.sync="userdialogVisible" width="30%" :append-to-body="true">
      <el-form :model="form" label-width="80px">
        <el-form-item label="账户名" prop="name">
          <el-input v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="name">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8010/eleupload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl"
              :src="'http://localhost:8010/getImage?name='+imageUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介" prop="name">
          <el-input :rows="3" v-model="form.intro" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userdialogVisible = false">取 消</el-button>
        <el-button @click="submit" type="primary">确定修改</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="mofifyPwdialogVisible" width="30%" :append-to-body="true">
      <el-form :model="pwform" label-width="80px">
        <el-form-item label="原来密码" prop="name">
          <el-input v-model="pwform.pw1" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="name">
          <el-input v-model="pwform.pw2" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mofifyPwdialogVisible = false">取 消</el-button>
        <el-button @click="modifypw" type="primary">修改密码</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    lform: {
      style: Object
    }
  },
  data() {
    return {
      userdialogVisible: false,
      mofifyPwdialogVisible: false,
      imageUrl: "",
      form: {},
      pwform: {}
    };
  },
  mounted() {
    this.form = JSON.parse(JSON.stringify(this.lform));
    this.imageUrl = this.form.avatar_Url;
    window.onNuxtReady(() => {
      if (this.form.avatar_Url == null) {
        this.form = JSON.parse(JSON.stringify(this.$store.state.user.userInfo.user));
        this.imageUrl = this.form.avatar_Url;
      }
    });
  },
  methods: {
    beforeAvatarUpload() {},
    handleAvatarSuccess(res, file) {
      window.console.log("res", res);
      this.imageUrl = res.url.split("=")[1];
    },
    modify() {
      this.userdialogVisible = true;
    },
    modifyPw(){
      this.mofifyPwdialogVisible = true;
    },
    modifypw(){
      if(this.pwform.pw1==""||this.pwform.pw2==""){
        this.$message.error("密码不能为空")
        return
      }
      if(this.pwform.pw1.length<6||this.pwform.pw2.length<6){
        this.$message.error("密码长度不能小于6位")
        return
      }
      this.$axios.get("/api2/user/modifypw?id="+
        this.form.uid+"&pw1="+
        this.pwform.pw1+"&pw2="+
        this.pwform.pw2
      ).then(res=>{
        if(res.data.message == "SUCCESS"){
          this.$message.success("修改密码成功!")
          this.mofifyPwdialogVisible = false
        }
      })
    },
    submit() {
      this.$axios
        .post("/api2/user/modify", {
          id: this.form.uid,
          nickname: this.form.nickname,
          avataurl: this.imageUrl,
          intro: this.form.intro
        })
        .then(res => {
          this.$message.success("修改成功");
          this.$store
            .dispatch("user/refresh",this.$store.state.user.userInfo.token)
            .then(res => {
              this.userdialogVisible = false;
            });
        });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    //   background: red;
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
#userbox {
  // min-height: 350px;
  width: 252px;
  background: rgb(225, 242, 245);
  border-radius: 20px;
  padding: 10px;
  margin: 20px;
  .avatar {
    margin: 0 auto;
    height: 130px;
    width: 130px;
    img {
      height: 130px;
      width: 130px;
      border-radius: 130px;
       object-fit: cover;
    }
  }
  .nickname {
    margin: 20px;
    text-align: center;
    font-size: 25px;
    font-weight: 500;
  }
  .modifypassword {
    color: rgb(5, 102, 167);
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
  .level {
    font-weight: 600;
    color: rgb(189, 124, 3);
  }
  .inline {
    display: inline-block;
  }
  .center {
    text-align: center;
  }
  .intro {
    width: 200px;
    margin: 15px auto;
    .intro_content {
      padding: 10px;
      width: 200px;
      border-radius: 10px;
      background: blanchedalmond;
    }
    .button {
      width: 200px;
      height: 30px;
      line-height: 30px;
      margin: 10px auto;
      border-radius: 10px;
      text-align: center;
      background: darkgray;
      color: black;
      &:hover {
        background: rgb(221, 213, 213);
        cursor: pointer;
      }
    }
  }
}
</style>